<template>
	<el-container>
		<el-main class="nopadding" style="padding:0 20px">
			<el-table ref="sealTable" :data="checkedSeal" stripe border>
                <el-table-column label="序号" type="index"></el-table-column>
                <el-table-column label="工厂/部门" min-width="150" prop="sealFactory"> </el-table-column>
                <el-table-column label="监印人" min-width="150" prop="keepName"> </el-table-column>
				<el-table-column label="印章名称" min-width="180" prop="sealName"> </el-table-column>
				<el-table-column label="物料编号" width="150" prop="materialCode"></el-table-column>
				<el-table-column label="规格" width="150" prop="specifications"></el-table-column>
				<el-table-column label="数量" width="108" prop="sealCount">
                    <template #default="scope">
                        <el-input-number v-model="scope.row.sealCount" :min="1" style="width: 80px" size="small" />
                    </template>
                </el-table-column>
				<el-table-column label="印章图样" prop="sealPattern" width="170">
                    <template #default="scope">
                        <bydWaterMark ref="wm" text="印章管理系统" subtext="印章图样">
                           <el-image @click="handleLoad"
                                style="width: 120px; height: 100px" 
                                :preview-teleported="true" 
                                :src="scope.row.sealPattern" 
                                :fit="fit" 
                                :preview-src-list="[scope.row.sealPattern]">
                            </el-image>
                        </bydWaterMark>
                    </template>
                </el-table-column>
				<el-table-column label="备注" width="180" prop="remark"></el-table-column>
			</el-table>
            <el-form ref="form" :rules="rules" :model="forwardInfo" label-width="100px" style="margin-top: 10px;">
                <el-form-item label="是否跨部门">
                    <el-switch v-model="forwardInfo.isCrossPlace"/>
                </el-form-item>
                <el-row v-if="forwardInfo.isCrossPlace">
					<el-col :span="6">
						<el-form-item label="转交地区" size="default" prop="place">
                            <el-select v-model="forwardInfo.place" class="m-2" placeholder="请选择地区">
                                <el-option
                                    v-for="item in placeOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
						</el-form-item>
					</el-col>
                    <el-col :span="7">
						<el-form-item label="工厂/部门" size="default" prop="factory">
							<el-input v-model.trim="forwardInfo.factory" placeholder="请输入工厂/部门"></el-input>
						</el-form-item>
					</el-col>
                    <!-- <el-col :span="7">
						<el-form-item label="转交部门" size="default" prop="department">
							<el-input v-model.trim="forwardInfo.department" placeholder="请输入转交部门"></el-input>
						</el-form-item>
					</el-col> -->
				</el-row>
                <el-row :gutter="10">
					<el-col :span="20">
						<el-form-item label="转交原因" size="default" prop="getReason">
							<el-input v-model.trim="forwardInfo.getReason" type="textarea" placeholder="请输入转交原因"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
                <el-row :gutter="10">
                    <el-col :span="10" >
                        <el-form-item label="接收人" prop="receivePeople">
                            <el-input v-model="forwardInfo.receivePeople" readonly>
                                <template #append>
                                    <el-button @click="peopleSearch">查询</el-button>
                                </template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10" >
                        <el-form-item label="转交日期" prop="getDate">
                            <el-date-picker type="date" placeholder="选择转交日期" value-format="YYYY-MM-DD" v-model="forwardInfo.getDate" style="width:100%"></el-date-picker>
                        </el-form-item>
                    </el-col>
				</el-row>	
                <el-form-item>
                    <el-button @click="resetForm('form')">重置</el-button>
                    <el-button :loading="submitBtnLoad" type="primary" @click="onSubmit('form')">提交</el-button>
                </el-form-item>
			</el-form>
		</el-main>
	</el-container>
    <peopleSearch title="人员查询" v-model="dialogVisible" @selectChange="checkPeople"/>
</template>

<script>
	import { create } from '@/utils/watermark'
	import bydFileImport from '@/components/bydFileImport'
    import peopleSearch from '@/views/components/peopleSearch.vue'
	export default {
		name: "entitySeal",
		components:{create,bydFileImport,peopleSearch},
        props:{
            checkedSeal: {
				type: Object,
			},    
        },
		data(){
            var checkPlace = (rule, value, callback) => {
                if(this.forwardInfo.isCrossPlace && !value){
                    return callback(new Error('请选择转交地区'));
                }
                callback()
            }
            var checkFactory = (rule, value, callback) => {
                if(this.forwardInfo.isCrossPlace && !value){
                    return callback(new Error('请输入转交工厂/部门'));
                }
                callback()
            }
            // var checkDepartment = (rule, value, callback) => {
            //     if(this.forwardInfo.isCrossPlace && !value){
            //         return callback(new Error('请输入转交部门'));
            //     }
            //     callback()
            // }
			return {
                dialogVisible:false,
                forwardInfo:{
                    isCrossPlace : false,
                    getReason : "",
                    receivePeople : "",
                    getDate: "",
                    place: "",
                    factory: "",
                    // department: ""                
                },
                submitBtnLoad : false,
                rules:{
                    getReason:[
						{required:true,message:'请输入转交原因',trigger:'blur'}
					],
                    receivePeople:[
						{required:true,message:'请输入接收人',trigger:['change', 'blur']}
					],
                    getDate:[
						{required:true,message:'请输入转交日期',trigger:'blur'}
					],
                    place:[
                        {validator: checkPlace,trigger:'blur'}
                    ],
                    factory:[
                        {validator: checkFactory,trigger:'blur'}
                    ],
                    // department:[
                    //     {validator: checkDepartment,trigger:'blur'}
                    // ]
                },
                placeOptions:[]
			}
		},
        mounted(){
           this.getPlaceList();
        },
		methods: {
            //获取地区下拉框
            async getPlaceList() {
                const placeList = await this.$api.filing.getPlaceList.get();
                if(placeList.respCode == "0000"){
                    var placeOptionTime = [];
                    placeList.data.forEach(ele => {
                        const item = {
                            value : ele,
                            label : ele
                        }
                        placeOptionTime.push(item);
                    });
                    console.log(placeOptionTime)
                    this.placeOptions = placeOptionTime;
                }
            },
			//添加水印
			handleLoad() {
                setTimeout(() => {
                    const img = document.querySelector('.el-image-viewer__canvas');
                    var userInfo = this.$tool.data.get("USER_INFO");
                    create(img, { text: '印章管理系统',subtext : userInfo.username + userInfo.jobnumber })
                }, 100)
            },
            peopleSearch(){
                this.dialogVisible = true;
            },
            checkPeople(row = {}){
				const { jobnumber,username } = row;
				this.forwardInfo.receivePeople = jobnumber + "-" + username;
			},
            resetForm(formName) {
				this.$refs[formName].resetFields();
			},
            //提交表单
			onSubmit(formName) {
				this.submitBtnLoad = true;
				this.$refs[formName].validate(async (valid) => {
					if (valid) {
						if(this.checkedSeal.length == 0){
                            this.$message.error("页面出现异常,请刷新重试!")
							return false;
						}else{//提交后端
                            //跨部门不可还选择当前科室(&& this.forwardInfo.department == this.checkedSeal[0].department)
                            if(this.forwardInfo.isCrossPlace  && this.forwardInfo.factory == this.checkedSeal[0].sealFactory
                                    && this.forwardInfo.place == this.checkedSeal[0].place){
                                    this.$message.error("转交的工厂或部门不可以当前印章隶属工厂相同");
                                    this.submitBtnLoad = false;
                                    return false;
                            }
                            //接收人不可是当前监印人
                            let receivePeopleList = this.forwardInfo.receivePeople.split("-");
                            if((receivePeopleList[1] + receivePeopleList[0]) == this.checkedSeal[0].keepName){
                                this.$message.error("接收人不可选择为当前监印人！");
                                this.submitBtnLoad = false;
                                return false;
                            }
							var forwardResult = await this.$api.filing.sealForward.post({
								...this.forwardInfo,
								sealInfo: JSON.stringify(this.checkedSeal)
							})
							if(forwardResult.respCode == "0000"){
								this.$message({
									message: forwardResult.respDesc,
    								type: 'success',
								})
								setTimeout(() => {
									location.reload();
								},1500)
							}else{
								this.submitBtnLoad = false;
								this.$message.error(forwardResult.respDesc)
							}
						}
					} else {
						console.log('error submit!!');
						this.submitBtnLoad = false;
						return false;
					}
				});
			},
		}
	}
</script>
<style>
</style>
